@charset "utf-8";

table {
    border-collapse: collapse;
    border-spacing: 0;
}

.table-responsive {
    width: 100%;
    overflow-x: auto;

    * {
        box-sizing: border-box;
    }
}

// table fun.less
.bgColor(@opacity: 0.14) {
    background-color: rgba(0, 0, 0, @opacity);
}
.border(@width: 1px) {
    border: @width solid rgba(0, 0, 0, 0.14);
}
.padding() {
    padding: 0.75rem;
}
.userSelect() {
    user-select: none;
}
.textCenter() {
    .text-c {
        text-align: center;
    }
}
.paddingSm() {
    &.table-sm {
        th, td {
            padding: 0.3rem;
        }
    }
}
// 有边框
.tableBordered() {
    &.table-bordered {
        .border();
        th, td {
            .border();
        }
        th {
            border-bottom: 2px solid rgba(0, 0, 0, 0.24);
        }
    }
}
// 无边框
.tableNoBordered() {
    &.table-no-bordered {
        th, td, thead th {
            border: 0;
        }
    }
}

// 隔行换色
.tableStripedHover() {
    &.table-striped {
        tbody {
            tr {
                &:nth-of-type(odd) {
                    .bgColor();
                }
            }
        }
    }
    &.table-hover {
        tbody {
            tr {
                &:hover {
                    .bgColor(@opacity: 0.05);
                }
            }
        }
    }
}

.table {
    width: 100%;
    text-align: left;

    thead {
        tr {
            .bgColor();

            th {
                .padding();
                .userSelect();
                font-weight: 400;
                white-space: nowrap;
            }
        }
    }
    tbody,
    tfoot {
        tr{
            transition: all 0.3s;

            td {
                .padding();
                border-top: 1px solid rgba(0, 0, 0, 0.24);
                white-space: nowrap; // 文本不会换行
                vertical-align: middle;
            }
        }
    }

    .paddingSm();

    .tableBordered();
    .tableNoBordered();

    .tableStripedHover();

    .textCenter();
}
